<template>
  <div class="friends-list">
    <FriendItem
      v-for="(item, index) of friendsList"
      :key="index"
      :user="item"
      @clickFriend="handleClickFriend"
    />
  </div>
</template>

<script>
import FriendItem from "./components/FriendItem";
export default {
  name: "FriendsList",
  components: {
    FriendItem
  },
  methods: {
    handleClickFriend(user) {
      console.log(user);
    }
  },
  data() {
    return {
      friendsList: [
        {
          nickname: "逍遥侠",
          avatar:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596724015541&di=b33ff31b1c07c3f1b0c3d7f164a08176&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3Dc252cd4e0e082838680ddc1c8898a964%2F7a098ecad1c8a7862c3a2c5f6e09c93d70cf5061.jpg",
          online: true
        },
        {
          nickname: "潇洒哥",
          avatar:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1044628451,3474938317&fm=11&gp=0.jpg",
          online: false
        }
      ]
    };
  }
};
</script>

<style scoped lang="less">
.friends-list {
  box-sizing: border-box;
  padding: 2vh 2vw 20vh 2vw;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
